<template>
  <div class="win">
    <div class="integral_box">
      <img v-if="bjurl" :src="bjurl+'big_integral_logo.png'" />
      <p class="integral_number">{{integralNumber}}</p>
      <p class="bottom_word">当前积分</p>
    </div>
    <div class="integral_record_box">
      <p class="title">积分记录</p>

      <noData v-if="integralRecord==''"></noData>
      <div class="item" v-for="(item, index) in integralRecord" :key="index">
        <p class="time">{{item.create_time}}</p>
        <p class="mode">{{item.type}}</p>
        <div class="number">
          <p>{{item.integral}}</p>
          <img v-if="bjurl" :src="bjurl+'small_integral_logo.png'" />
        </div>
      </div>
    </div>
    <i-toast id="toast" />
  </div>
</template>

<script>
import noData from "@/components/noData";
export default {
  data() {
    return {
      bjurl: "",
      integralNumber: "", //当前积分数量
      integralRecord: []
    };
  },
  components: {
    noData
  },
  methods: {
    // 请求接口积分记录
    getIntegralRecord() {
      this.$ajax("/home/integral/integral_list", "post", {})
        .then(res => {
          
          if (res.status) {
            // this.integralNumber = res.integral_count;
            this.integralRecord = res.data;
          } else {
            this.integralRecord = "";
          }
        })
        .catch(err => {});
    }
  },
  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.bjurl = this.$bjurl;
    this.integralNumber = e.integral_num;
    this.getIntegralRecord();
  }
};
</script>

<style lang="scss" scoped>
.win {
  .integral_box {
    background-color: #ffffff;
    padding: 50rpx 0 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 142rpx;
      height: 139rpx;
    }
    .integral_number {
      color: $green;
      font-size: 68rpx;
      margin-top: 40rpx;
    }
    .bottom_word {
      margin-top: 28rpx;
      font-size: 24rpx;
      color: #181818;
      opacity: 0.5;
    }
  }
  .integral_record_box {
    margin-top: 20rpx;
    .title {
      background-color: #ffffff;
      height: 95rpx;
      padding-left: 30rpx;
      font-size: 32rpx;
      color: #181818;
      line-height: 95rpx;
    }
    .item {
      padding: 0 30rpx;
      margin-bottom: 2rpx;
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #4d4d4d;
      font-size: 30rpx;
      height: 103rpx;
      box-sizing: border-box;
      .time {
        width: 55%;
        text-align: left;
      }
      .mode {
        width: 17%;
        text-align: center;
      }
      .number {
        width: 28%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: $green;
        font-size: 32rpx;
        img {
          margin-left: 12rpx;
          width: 44rpx;
          height: 43rpx;
        }
      }
    }
  }
}
</style>
